<template>
  <div class="employees">
    <pageTools>
      <template #right>
        <el-button
          type="primary"
          :disabled="'employees-print' | btnper"
          size="mini"
          @click="myimport"
          >导入</el-button
        >
        <el-button type="primary" size="mini" @click="addemploy"
          >+ 新增员工</el-button
        >
      </template>
    </pageTools>
    <el-card class="mycard">
      <el-table :data="employeesData">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="staffPhoto" label="头像" width="100">
          <template slot-scope="{ row }">
            <img
              class="headimg"
              :src="row.staffPhoto"
              v-errimg="require('../../assets/common/bigUserHeader.png')"
              @click="codeDialog(row.staffPhoto)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="workNumber"
          label="工号"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column label="聘用形势">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | trunHireType }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="部门"
          width="100"
        ></el-table-column>
        <el-table-column label="入职时间" width="200" sortable>
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | timeformat }}
          </template>
        </el-table-column>
        <el-table-column label="是否在职">
          <template>
            在职
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template>
            可用
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" @click="examine(row.id)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="openRole(row.id)">角色</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
    <template>
      <addemployees :Dialog="showDialog" @closed="closed"></addemployees>
    </template>
    <template>
      <role :roleShow.sync="roleDialog" :userId="userId" ref="role"></role>
    </template>
    <div>
      <codeImg :showCode.sync="showCode" ref="mycode"></codeImg>
    </div>
  </div>
</template>

<script>
import codeImg from './code/index.vue'
import addemployees from './components/addemployees.vue'
import { getEmpListApi } from '../../api/employees'
import { delRoleApi } from '../../api/role'
import role from './components/role.vue'
export default {
  components: {
    addemployees,
    role,
    codeImg
  },
  data () {
    return {
      employeesData: [],
      page: {
        currentPage: 1,
        pageSizes: [1, 5, 10, 20, 30],
        pageSize: 5,
        total: 10
      },
      showDialog: false,
      roleDialog: false,
      userId: '',
      showCode: false
    }
  },
  methods: {
    codeDialog (img) {
      this.showCode = true
      this.$refs.mycode.showCanvas(img)
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm('确定要删除该员工吗?')
        delRoleApi(id)
        this.getEmpList()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    openRole (id) {
      this.userId = id
      this.roleDialog = true
      this.$refs.role.getRole(id)
    },
    examine (Id) {
      this.$router.push(`/employees/detail/${Id}`)
    },
    myimport () {
      this.$router.push('/employees/myimport')
    },
    // 新增员工显示弹窗
    addemploy () {
      this.showDialog = true
    },
    closed () {
      this.showDialog = false
    },
    async getEmpList () {
      const res = await getEmpListApi({
        page: this.page.currentPage,
        size: this.page.pageSize
      })
      console.log(res)
      this.employeesData = res.rows
      this.page.total = res.total
    },
    handleSizeChange (size) {
      this.page.pageSize = size
      this.getEmpList()
    },
    handleCurrentChange (current) {
      this.page.currentPage = current
      this.getEmpList()
    }
  },
  created () {
    this.getEmpList()
  }
}
</script>

<style lang="scss">
.employees {
  padding: 20px 20px;
  .mycard {
    margin-top: 20px;
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  .headimg {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
}
</style>
